<template>
  <div
    class="detail"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="order-detail-head clearfix">
      <h3 class="order-title fl">订单详情</h3>
      <p class="fr" @click="backPrev">返回上一页</p>
    </div>
    <div class="order-status clearfix">
      <p class="order-num fl">订单号：{{ info.id }}</p>
      <p class="order-status-info fr">
        <span>订单状态：</span>
        <span v-if="info.orderStatus == 0">待发货</span>
        <span v-else>待发货</span>
      </p>
    </div>
    <div class="detail-box clearfix">
      <div class="receiveing-info other-info fl">
        <h4>收货人信息</h4>
        <ul>
          <li>
            <span>收货人：</span>
            <span>{{ info.name }}</span>
          </li>
          <li>
            <span>手机号码：</span>
            <span>{{ info.phone }}</span>
          </li>
          <li>
            <span>地址：</span>
            <span>{{ info.address }}</span>
          </li>
        </ul>
      </div>
      <div class="pay-info other-info fl">
        <h4>付款信息</h4>
        <ul>
          <li>
            <span>付款方式：</span>
            <span>线下</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="product-info">
      <h4>产品信息</h4>
      <el-table :data="info.res" style="width: 100%" v-loading="loading" border>
        <el-table-column label="序号" type="index" align="center" width="80">
        </el-table-column>
        <el-table-column
          prop="name"
          label="产品名称"
          align="center"
          width="332"
        >
        </el-table-column>
        <el-table-column
          prop="materialId"
          label="产品编号"
          align="center"
          width="160"
        >
        </el-table-column>
        <el-table-column prop="num" label="数量" align="center" width="140">
        </el-table-column>
        <el-table-column prop="price" label="金额" align="center" width="120">
          <template slot-scope="scope">
            <p style="color: #de3322">￥{{ scope.row.price }}</p>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="product-info">
      <h4>签署合同</h4>
      <el-table
        :data="contractTableData"
        style="width: 100%"
        v-loading="loading"
        border
      >
        <el-table-column
          prop="providerName"
          label="甲方"
          align="center"
          width="332"
        >
        </el-table-column>
        <el-table-column
          label="合同"
          prop="contract"
          align="center"
          width="180"
        >
          <template slot-scope="scope">
            <div v-if="pageData.contract != null && pageData.contract !== ''">
              <el-button
                @click.native.prevent="lookContract(scope.row.contract)"
                type="text"
                size="small"
                style="color: #e17e0a"
              >
                查看合同
              </el-button>
            </div>
            <div v-else>
              <el-button
                @click.native.prevent="uploadContract(scope.row)"
                type="text"
                size="small"
                style="color: #e17e0a"
              >
                上传合同
              </el-button>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" width="350">
          <template slot-scope="scope">
            <div v-if="signSealStatus === 'WAIT'">
              <el-button
                @click.native.prevent="signWord(1)"
                type="text"
                size="small"
                style="color: #e17e0a"
                v-if="userType == 'PERSON'"
              >
                签字
              </el-button>

              <el-button
                @click.native.prevent="signWord(2)"
                type="text"
                size="small"
                style="color: #e17e0a"
                v-else
              >
                签字
              </el-button>
            </div>

            <div v-if="signSealStatus === 'FINISHED'">
              <div style="margin: 5px 10px 0px 15px">
                <el-row class="clearfix">
                  <img
                    :src="
                      'data:image/png;base64,' +
                      pageData.signSealStatus.sealData
                    "
                    class="viewer_img"
                  />
                </el-row>
              </div>
            </div>

            <div v-if="signSealStatus === 'FINISHED' && pageData.isSign === 0">
              <el-button
                @click.native.prevent="submit(2)"
                type="text"
                size="small"
                style="color: #e17e0a"
                v-preventReClick
              >
                签署合同
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog title="上传合同" :visible.sync="openVisible" width="400px">
      <el-upload
        ref="upload"
        :limit="1"
        :headers="headers"
        :action="url"
        :disabled="isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>

        <!-- <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！</div> -->
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm" :loading="uploading"
          >确 定</el-button
        >
        <el-button @click="openVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <sigleApplySeal
      ref="sigleDom"
      v-if="sigleVisible"
      @update="update"
    ></sigleApplySeal>

    <companyApplySeal
      ref="compaynDom"
      v-if="compyanVisible"
      @update="update"
    ></companyApplySeal>
  </div>
</template>
<script>
import sigleApplySeal from "../../components/sigleApplySeal"; // 个人申请印章
import companyApplySeal from "../../components/companyApplySeal"; // 企业申请印章
import Cookie from "js-cookie";

export default {
  components: {
    sigleApplySeal,
    companyApplySeal,
  },
  data() {
    return {
      tableData: [{}],
      pageData: null,
      pageTypeStr: "",
      loading: false,
      info: {
        id: "", //订单号
        orderStatus: "", //订单状态
        name: "", //收货人
        phone: "", //手机号码
        address: "", //地址
        res: [], // 产品信息
      },
      //签署合同
      contractTableData: [],

      //上传合同
      openVisible: false,
      uploading: false,
      isUploading: false, // 是否禁用上传
      headers: {
        //上传head
        TOKEN: Cookie.get("token"),
      },
      url: this.baseUrl + "/sys/file/upload?TOKEN=" + Cookie.get("token"), // 上传的地址

      //签字
      signSealStatus: "",
      compyanVisible: false, //企业申请
      sigleVisible: false, // 个人申请

      //签署合同
      isUpdisable: true,
      userType: Cookie.get("userType"),
    };
  },
  mounted() {},
  methods: {
    getDetail(id, pageType) {
      this.loading = true;
      this.pageTypeStr = pageType;
      var httpStr = "";
      if (pageType === "NCP") {
        httpStr = "/sys/placeOrder/getOrderCorpsDetail.do";
      } else if (pageType === "NZ") {
        httpStr = "/sys/placeOrder/getOrderProductsDetail.do";
      }

      this.$http("get", httpStr, {
        id: id,
      })
        .then((res) => {
          if (res.code == "0000") {
            this.info = res.result;

            this.pageData = res.result;

            //处理签署合同
            this.contractTableData = [];
            this.contractTableData.push({
              providerName: this.pageData.providerName, //商户名称
              contract: this.pageData.contract, //合同
            });

            //处理 签字状态
            if (this.pageData.signSealStatus != null) {
              this.signSealStatus = this.pageData.signSealStatus.status;

              if (this.signSealStatus === "NOIDENTITY") {
                this.$message.error(
                  "您还没有实名认证，请到进行实名认证了在进行相应操作"
                );
              }

              //已签署不能在上传
              if (
                this.signSealStatus === "FINISHED" &&
                this.pageData.isSign === 1
              ) {
                this.isUpdisable = false;
              }
            }

            //处理 签字图片
            this.pageData.signSealStatus.sealData =
              "data:image/png;base64," + _that.pageData.signSealStatus.sealData;

            console.log("图片显示：", this.pageData.signSealStatus.sealData);
          }
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    // 上传合同( 弹窗 显示)
    uploadContract(row) {
      this.openVisible = true;
      console.log("点击上传合同，获取的数据", row);
    },

    // 提交上传文件 （ 弹窗 中的确认按钮 ）
    submitFileForm() {
      this.$refs.upload.submit();
    },

    // 文件上传（ 上传中 回调）
    handleFileUploadProgress(event, file, fileList) {
      console.log(file.raw.name);
      this.isUploading = true;
    },

    // 文件上传 （ 上传 成功回调）
    handleFileSuccess(res, file, fileList) {
      this.uploading = true;

      console.log("合同上传回调：", res.result[0]);

      if (res.code == "0000") {
        this.$http("post", "/sys/placeOrder/uploadContract.do", {
          contract: res.result[0],
          id: this.pageData.id,
        }).then((rex) => {
          if (rex.code == "0000") {
            this.$message({
              type: "success",
              message: "上传成功",
            });
            this.uploading = false;
            this.getDetail(this.pageData.id, this.pageTypeStr);
          }
        });
      } else {
        this.$message.error("上传失败");
      }

      this.openVisible = false;
      this.isUploading = false;
    },

    // 签字
    signWord(type) {
      //type 1 代表个人 2 代表企业
      if (type == 1) {
        this.sigleVisible = true;
        this.$nextTick(() => {
          this.$refs.sigleDom.init();
        });
      } else {
        this.compyanVisible = true;
        this.$nextTick(() => {
          this.$refs.compaynDom.init();
        });
      }
    },
    submit(type) {
      var httpStr = "";
      if (this.pageTypeStr === "NCP") {
        httpStr = "/sys/placeOrder/sginyiCorps.do";
      } else if (this.pageTypeStr === "NZ") {
        httpStr = "/sys/placeOrder/sginyiProduct.do";
      }

      if (type == 2) {
        //签署合同
        let params = {
          id: this.pageData.id, //订单id
        };
        if (this.pageData.contract != null && this.pageData.contract !== "") {
          params.contract = this.pageData.contract;
        } else {
          this.$message.error("请先上传合同，上传合同之后才能签署合同");
          return;
        }

        this.$http(
          "get",
          "/sys/user/getUser.do?userId=" + this.pageData.providerUserId
        ).then((res) => {
          if (res.code == "0000") {
            //NO: 未认证, YES: 已认证, GONING: 进行中, FAIL: 认证失败
            var status = res.result.identityStatus;

           if (status === "YES") {
              this.diposeSubmit(httpStr,params);
            } else {
               this.$message.error("对方还没有进行实名认证，请联系对方认证之后才能签署合同");
            }
          }
        });


      }
    },
    diposeSubmit(httpStr,params){

       this.$http("post", httpStr, params).then((res) => {
          if (res.code == "0000") {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.$emit("backPrev");
              },
            });
          }
        });

    },
    // 查看合同
    lookContract(id) {
      console.log(id);
      var resId = "";
      if (id) {
        resId = id;
      } else {
        resId = this.info.contract;
      }
      var url =
        this.baseUrl +
        "/sys/file/new/down?TOKEN=" +
        Cookie.get("token") +
        "&id=" +
        resId;
      window.location.href = url;
    },

    backPrev() {
      this.$emit("backPrev");
    },
  },
};
</script>
<style scoped>
.detail {
  margin-left: 20px;
}
.order-title {
  font-size: 16px;
  color: #4a4a4a;
  padding-top: 15px;
  position: relative;
  padding-left: 4px;
  padding-bottom: 18px;

  padding: 20px 45px;
  background: #fff;
  position: relative;
}
.order-title::before {
  content: " ";
  width: 5px;
  height: 20px;
  background: #f48d06;
  border-radius: 2px;
  position: absolute;
  left: 34px;
  top: 20px;
}
.order-detail-head {
  border-bottom: 1px solid #e1e1e1;
}
.order-detail-head p {
  width: 108px;
  height: 30px;
  background: #ffffff;
  border-radius: 2px;
  border: 1px solid #f48d06;
  line-height: 30px;
  text-align: center;
  font-size: 14px;
  color: #f48d06;
  margin-right: 34px;
  margin-top: 15px;
  cursor: pointer;
}
.order-detail-head p:hover {
  background: #f48d06;
  color: #fff;
}
.detail-box {
  background: #fff;
  padding-top: 15px;
  padding-bottom: 20px;
  padding-left: 34px;
  padding-right: 34px;
}
.receiveing-info {
  width: 525px;
}
.pay-info {
  width: 265px;
  margin-left: 30px;
}
.order-status p {
  line-height: 50px;
  font-size: 16px;
  color: #262626;
}
.order-status {
  border-bottom: 1px solid #e1e1e1;
  background: #fff;
  padding: 0 34px;
}
.order-status p.order-status-info span:nth-child(1) {
  font-size: 16px;
  color: #262626;
}
.order-status p.order-status-info span:nth-child(2) {
  font-size: 16px;
  color: #ee781b;
}
.other-info h4,
.product-info {
  font-size: 14px;
  color: #171717;
  margin-bottom: 20px;
  font-weight: 550;
}
.other-info ul li {
  margin-bottom: 10px;
}
.other-info ul li span {
  color: #262626;
  font-size: 14px;
}
.other-info ul li span:nth-child(1) {
  width: 110px;
  display: inline-block;
}
.product-info {
  margin-top: 10px;
  padding-left: 34px;
  padding-right: 34px;
  background: #fff;
  padding-top: 20px;
  padding-bottom: 20px;
}
.product-info h4 {
  font-size: 14px;
  margin-bottom: 20px;
}

.viewer_img {
  position: relative;
  margin: 10px 10px;
  width: 50px;
  height: 50px;
}
</style>
